<template>
  <view class="he-page-content">
    <he-tabs ref="tabs" :list="tabs" :bar-height="4" :tabs-style="{ position: 'fixed', top: 0, width: '100%', zIndex: 2 }" :bar-bottom="24" :active-color="themeColor" :bold="false" bg-color="#F5F5F5" :height="114" :is-scroll="false" @change="change" :current="current"></he-tabs>
    <index-list v-model="list" :tab-cur="tabCur"></index-list>
    <view class="he-nothing" v-show="isNothing">
      <image class="he-nothing__image" :src="ipAddress + '/order-background-empty.png'"></image>
      <view>暂无相关订单</view>
    </view>
    <he-load-more v-if="list.length > 0" :status="loadStatus"></he-load-more>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>
<script>
import indexNav from "./components/index-nav.vue";
import indexList from "./components/index-list.vue";
import heLoadMore from "@/components/he-load-more.vue";
import heTabs from "@/components/he-tabs.vue";

export default {
  name: "index",
  data() {
    return {
      tabCur: "all",
      current: 0,
      page: {
        current: 1,
        size: 10,
        count: 1,
      },
      list: [],
      isNothing: false,
      loadStatus: "loadmore",
      loading: false,
      tabs: [
        { name: "全部", key: "all" },
        { name: "待付款", key: "unpaid" },
        { name: "待发货", key: "unsent" },
        {
          name: "待收货",
          key: "unreceived",
        },
        { name: "待评价", key: "noevaluate" },
      ],
    };
  },
  components: {
    indexNav,
    indexList,
    heLoadMore,
    heTabs,
  },
  methods: {
    setTab: function(callBack) {
      let _this = this;
      this.page.current = 1;
      this.isNothing = false;
      this.loading = true;
      this.loadStatus = "loadmore";
      this.getList().then(function(res) {
        _this.loading = false;
        _this.list = res;
        _this.isNothing = _this.list.length === 0;
        _this.loadStatus =
          _this.list.length < _this.page.size ? "nomore" : "loadmore";
        callBack();
      });
    },
    getList: function() {
      let _this = this;
      return new Promise(function(resolve) {
        _this.$heshop
          .order("get", {
            tab_key: _this.tabCur,
          })
          .page(_this.page.current, _this.page.size)
          .then(function(res) {
            let { data, headers } = res;
            resolve(data);
            // #ifdef MP-WEIXIN
            _this.page = {
              current: +headers["X-Pagination-Current-Page"],
              count: +headers["X-Pagination-Page-Count"],
              size: +headers["X-Pagination-Per-Page"],
            };
            // #endif
            // #ifdef H5
            _this.page = {
              current: +headers["x-pagination-current-page"],
              count: +headers["x-pagination-page-count"],
              size: +headers["x-pagination-per-page"],
            };
            // #endif
          })
          .catch(function(err) {
            _this.$toError(err);
          });
      });
    },
    change: function(e) {
      let _this = this;
      _this.tabCur = _this.tabs[e].key;
      this.setTab(function() {
        _this.current = e;
      });
    },
  },
  onLoad(options) {
    // #ifdef H5
    this.$wechat.init();
    // #endif
    this.tabCur = options.tabCur ? options.tabCur : "all";
    for (let i = 0; i < this.tabs.length; i++) {
      if (this.tabs[i].key === this.tabCur) {
        this.current = i;
      }
    }
    let _this = this;
    this.getList().then(function(res) {
      _this.list = res;
      _this.isNothing = _this.list.length === 0;
      _this.loadStatus =
        _this.list.length < _this.page.size ? "nomore" : "loadmore";
    });
  },
  onShow() {
    //获取插件设置
    this.$store.dispatch('plugins/getPlugins');
    let storageKey = this.$storageKey.evaluation_post;
    let storage = uni.getStorageSync(storageKey);
    if (storage) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id === storage.id) {
          this.list[i].status = 204;
          if (this.tabCur === "noevaluate" || this.tabCur === "unreceived") {
            this.$delete(this.list, i);
            this.isNothing = this.list.length === 0;
          }
          uni.removeStorageSync(storageKey);
          break;
        }
      }
    }
  },
  onReachBottom() {
    let _this = this;
    if (this.page.count > this.page.current) {
      this.page.current++;
      this.loadStatus = "loading";
      this.getList().then(function(res) {
        _this.list.push(...res);
        _this.loadStatus = "loadmore";
      });
    } else {
      this.loadStatus = "nomore";
    }
  },
};

</script>
<style scoped>
.he-page-content {
  overflow: hidden;
}

.he-nothing {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  text-align: center;
}

.he-nothing__image {
  width: 320px;
  height: 320px;
}

</style>
